iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 22
3
Modern Web

前端「設計」聖光之路系列 第 22

網頁設計規範 - 一致性的距離(計算方法、水平、垂直)

  • 分享至 

  • xImage
  •  

一開始的文章有介紹到格線系統,主要是針對水平欄位空間的介紹,而其實垂直空間也是需要有固定的間距,當然一方面是有一致的美感,另一方面則是讓開發者設定全網站可用間距時可以統一帶入。

本篇主要會針對兩個部分做介紹,一是如何定義間距,另一則是針對運用上的介紹。

  • 定義間距(5 的倍數、以文字大小)
  • 統一的運用(文字段落、小元件空間、大區塊的間隔)

定義間距

雖說間距需要定義固定的數值,但至於如何定義其實沒有完全固定的規範,如果定義出 2, 4, 6, 8, 10, 12... 等所有雙數數值也算定義,但這麼細的數值再運用上其實非常不便,在此列出常見的定義方式給大家參考。

整數的倍數

大多設計師會有個習慣,就是會將色碼、字級等數字抓成整數,如過去使用 CMYK 時,就會習慣 5, 10, 15 的數字依序做色彩定義,字級也會使用雙數 2, 4, 6, 8, 10 等等...。

這個概念也依然可以運用在網頁設計上,可以預先定義一套固定級數的間距作為使用,如:

5px
10px
15px
20px
30px
45px
60px

接下來所有的網站也都會用這些數值來設計,並且避免使用到 3, 6, 7, 8 這些未定義的數值。

文字的級數

另一種常見的定義方式則是搭配 rem,在 Bootstrap 中就是依據這種級數來做定義,且目前的網頁文字大小大多都以 16px 做為預設,因此延伸的級數則會有以下定義:

0.25rem  -> 4px
0.5rem   -> 8px
1rem     -> 16px
1.5rem   -> 24px
2rem     -> 32px
3rem     -> 48px

這種定義方式對於設計師來說沒那麼好理解,但對於工程師來說卻能夠有延伸的運用,假設網站類性不需要 16px 大的文字,他可以調整成 14px,那麼整體的間距也會跟著調整成如下:

0.25rem  -> 3.5px
0.5rem   -> 7px
1rem     -> 14px
1.5rem   -> 21px
2rem     -> 28px
3rem     -> 42px

以上兩種開發中都是很常見的,而設計師僅需選擇其中一種,並與開發者協調好即可(設計圖目前還沒有辦法透過統一設定調整畫面間距)。

統一的運用

定義好的間距會視設計需求來調整,但基本上還是會維持小空間使用小間距、大空間維持大間距的概念,如按鈕與按鈕之間就會避免使用 3rem 這種尺寸,而兩個大 section 之間當然也不會只使用 1rem 來做區隔,以下就依據一些常見情境作為範例:

元件之間

元件之間盡可能用小數值的間距做設定,透過此方式能夠維持相關內容依然視為一個群組;反之,過大的空間會使群組的觀念被打散。

https://ithelp.ithome.com.tw/upload/images/20181105/20083608L9rQtIbE1E.png

元件與外層區塊

元件與外層區塊雖為同一個群組,但外層區塊大多是背景或單色,不具有訊息內容,因此有些距離更能保持美感。

https://ithelp.ithome.com.tw/upload/images/20181105/2008360808SN8VB73O.png

區塊與區塊

區塊與區塊之間就是明確的不同訊息內容,因此要使用更大的空間將群組隔離,避免造成不同的訊息混淆。

https://ithelp.ithome.com.tw/upload/images/20181105/20083608yuVekDUgTP.png

如 Evernote 網站就透過垂直空間、背景色彩、排版的差異,將不同訊息的群組明確分離開。

Evernote: https://evernote.com/intl/zh-tw

Evernote 網站的部分截圖

結語

好的空間定義,具有以下特點:

  • 一致性:就算內容改變,全站依然維持相同的空間邏輯
  • 視覺群組:適當的空間區分內容
  • 可被開發運用:具有固定的數值,且是明確具有邏輯,使之便於開發合作

因此,建議設計師會預先定義好所需運用的間隔尺寸,接下來再設計時也便於方便取用,避免開發好幾頁後才發現空間間隔不一致。


上一篇
網頁設計規範 - 參考來源
下一篇
網頁設計規範 - 表單元素的注意事項
系列文
前端「設計」聖光之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言